import { defineComponent, reactive, ref } from "vue";
import style from "./index.module.less";
import PageTitle from "@/components/PageTitle";
import Banner from "@/components/Banner";
import CardView from "@/components/CardView";
import TitleView from "@/components/TitleView";
import Text from "@/components/Text";
import RoundInfo from "@/components/RoundInfo";
import { useRequest } from "./request";
import Video from "@/components/Video";

export default defineComponent({
  name: "",
  setup() {
    const { formData } = useRequest();
    console.log("内容", formData);
    const render1 = () => {
      return (
        <Video
          url={formData.value.path}
          poster={formData.value.logoUrl}
          class={["!w-full"]}
        />
        // <vue3VideoPlay
        //   title={formData.value.title}
        //   width="100vw"
        //   src={formData.value.path}
        //   poster={formData.value.logoUrl}
        //   class={["w-full"]}
        //   muted={true}
        // />
      );
    };
    const render9 = () => {
      const info = formData.value;
      return (
        <RoundInfo src={info.logoUrl} title={info.userName} text={info.areas} />
      );
    };
    const render2 = () => {
      const info = formData.value;
      const data = {
        title: info.title,
        view: render9,
      };

      return (
        <div class="flex flex-col mx-[20px] ml-[10px] mt-[5px] m-child-top-20 ">
          <CardView title={data.title}>{data.view()}</CardView>
        </div>
      );
    };
    const render3 = () => {
      return (
        <Text class={["mx-20 break-words"]}>
          {"简介 ：" + formData.value.content}
        </Text>
      );
    };
    return () => {
      return (
        <PageTitle title="农技课堂" childClass="!p-[0px]">
          {render1()}
          {/* 加载富文本 */}
          <CardView class={[" px-0 pt-0"]}>
            {render2()}
            {render3()}
          </CardView>
        </PageTitle>
      );
    };
  },
});
